<template>
  <div id="app">
    <el-table
        border
        :data="tableData"
        style="width: 100%"
        height="100%">

      <el-table-column
          fixed
          align="center"
          prop="name"
          label="姓名"
          width="100">
      </el-table-column>

      <el-table-column v-for="(title, index) in titleList"
                       :key="title.id"
                       align="center"
                       :label="title.label"
                       min-width="80">
        <template slot-scope="scope">
          <el-input v-direction="{x:index, y:scope.$index}" v-model="scope.row.scores[index]" size="mini"></el-input>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          align="center"
          label="总分"
          width="100">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.total }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  data() {
    return {
      titleList: [{
        label: "事业心",
        id: 1
      }, {
        label: "执行力",
        id: 2
      }, {
        label: "勤奋主动",
        id: 3
      }, {
        label: "工作量",
        id: 4
      }, {
        label: "工作质量",
        id: 5
      }, {
        label: "安全保密疫情防控工作",
        id: 6
      }, {
        label: "管理沟通协调",
        id: 7
      }, {
        label: "专业能力",
        id: 8
      }, {
        label: "学习及创新",
        id: 9
      }],
      tableData: [{
        name: "张三",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "李四",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      }, {
        name: "张三丰",
        scores: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        total: 68.95
      },]
    }
  },
  created() {
    this.initDirection()
  },
  methods: {
    initDirection() {
      let direction = this.$getDirection()
      const tableDom = document.getElementsByClassName('el-table__body-wrapper')
      direction.on('keyup', function (e, val) {
        if (e.keyCode === 39) {
          // direction.next()
          // todo - 左右移动, 滚动条有点问题
        }
        if (e.keyCode === 37) {
          // direction.previous()
          // todo - 左右移动, 滚动条有点问题
        }
        if (e.keyCode === 38) {
          direction.previousLine()
        }
        if (e.keyCode === 40) {
          direction.nextLine()
        }
        if (e.keyCode === 13) {
          // console.log(direction)
          direction.nextLine() // 回车: 下一行
          // 到达最后一行
          if (direction.y >= direction.nodeArray.length - 1) {
            // 未到底最后一列
            if(direction.x < direction.nodeArray[0].length - 1) {
              const tableWidth = tableDom[0].clientWidth
              // 列大于三行, 开始缩进
              if(direction.x >= 3){
                tableDom[0].scrollLeft = tableWidth * direction.x / direction.nodeArray[0].length
              }
              direction.next(direction.x, 0)
            }
          }
        }
        // HOME
        if (e.keyCode === 36) {
          if(direction.y === 0) {
            direction.next(-1, 0) // 如果已经在当前列首行, 则回到首行首列
            tableDom[0].scrollLeft = 0
          }else {
            direction.next(direction.x - 1, 0) // 快速回到当前列首行
          }
        }
      })
    }
  }
}
</script>

<style lang="less">
#app {
  // width: 600px;
  // height: 600px;
}

.el-input__inner {
  padding: 0 5px;
}
</style>
